<template>
	<el-form :model="detailForm" ref="detailForm" :inline="false">
		<el-card class="box-card" shadow="never">
			<div slot="header" class="header-card">
				<span class="header-card-title">车辆录入保险价格明细</span>
			</div>

			<el-row>
				<el-col>
					<el-table
						v-if="detailForm.insuranceVoList"
						:data="detailForm.insuranceVoList"
						:summary-method="getSummaries"
						highlight-current-row
						show-summary
						style="width: 100%">
						<el-table-column align="center" type="index" width="50" fixed="left" />

						<el-table-column
							align="center"
							label="车架号"
							fixed="left"
							prop="vinNo"
							min-width="160" />

						<el-table-column
							align="center"
							label="保费合计"
							fixed="left"
							min-width="120">
							<template #default="{ row }">
								<span>{{ handleTotal(row) }}</span>
							</template>
						</el-table-column>

						<el-table-column
							align="center"
							label="车船税"
							min-width="160"
							prop="carTax">
							<template #default="{ row, $index }">
								<el-form-item
									class="formTable"
									:prop="'insuranceVoList.' + $index + '.carTax'"
									:rules="{ required: requiredCarTax, trigger: 'blur' }"
									:class="
										handleClass(row.carTax, $index, detailForm.carTax)
											? 'redColor'
											: ''
									">
									<el-input
										v-if="isEdit"
										:disabled="detailForm.carTaxStatus == 2"
										v-model="row.carTax"
										placeholder="请输入车船税费用"
										v-thousand
										@change="changeTable(row, $index, 'carTax')"
										size="mini" />
									<span
										v-else
										:class="
											handleClass(row.carTax, $index, detailForm.carTax)
												? 'redSpan'
												: ''
										">
										{{ format_thousand(row.carTax) }}
									</span>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column
							align="center"
							label="交强险保费"
							min-width="160"
							prop="jqxAmount">
							<template #default="{ row, $index }">
								<el-form-item
									class="formTable"
									:prop="'insuranceVoList.' + $index + '.jqxAmount'"
									:rules="{ required: isEdit, trigger: 'blur' }"
									:class="
										handleClass(row.jqxAmount, $index, detailForm.jqxAmount)
											? 'redColor'
											: ''
									">
									<el-input
										v-if="isEdit"
										v-model="row.jqxAmount"
										placeholder="请输入交强险保费"
										v-thousand
										@change="changeTable(row, $index, 'jqxAmount')"
										size="mini" />
									<span
										v-else
										:class="
											handleClass(row.jqxAmount, $index, detailForm.jqxAmount)
												? 'redSpan'
												: ''
										">
										{{ format_thousand(row.jqxAmount) }}
									</span>
								</el-form-item>
							</template>
						</el-table-column>

						<el-table-column
							align="center"
							label="商业险保费"
							min-width="160"
							prop="syxAmount">
							<template #default="{ row, $index }">
								<el-form-item class="formTable">
									<span>{{ handleSyxAmount(row, $index) }}</span>
								</el-form-item>
							</template>
						</el-table-column>

						<!--商业险-->

						<el-table-column label="商业险" align="center">
							<el-table-column
								align="center"
								label="第三责任险"
								min-width="140"
								prop="szxPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.szxPrice, $index, 'szxPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.szxPrice"
											placeholder="请输入第三责任险"
											v-thousand
											:disabled="handleDisabled('szxPrice')"
											@change="changeTableSyx(row, $index, 'szxPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.szxPrice, $index, 'szxPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.szxPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="车上人员责任保险(乘客)"
								min-width="180"
								prop="ckPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.ckPrice, $index, 'ckPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.ckPrice"
											placeholder="请输入车上人员责任保险(乘客)"
											v-thousand
											:disabled="handleDisabled('ckPrice')"
											@change="changeTableSyx(row, $index, 'ckPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.ckPrice, $index, 'ckPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.ckPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="车上人员责任保险人(驾驶员)"
								min-width="195"
								prop="jsyPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.jsyPrice, $index, 'jsyPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.jsyPrice"
											placeholder="请输入车上人员责任保险人(驾驶员)"
											v-thousand
											:disabled="handleDisabled('jsyPrice')"
											@change="changeTableSyx(row, $index, 'jsyPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.jsyPrice, $index, 'jsyPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.jsyPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="车辆损失险"
								min-width="140"
								prop="csxPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.csxPrice, $index, 'csxPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.csxPrice"
											placeholder="请输入车辆损失险"
											v-thousand
											:disabled="handleDisabled('csxPrice')"
											@change="changeTableSyx(row, $index, 'csxPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.csxPrice, $index, 'csxPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.csxPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="轮胎单独损失险"
								min-width="140"
								prop="clPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.clPrice, $index, 'clPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.clPrice"
											placeholder="请输入轮胎单独损失险"
											v-thousand
											:disabled="handleDisabled('clPrice')"
											@change="changeTableSyx(row, $index, 'clPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.clPrice, $index, 'clPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.clPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="车身划痕损失险"
								min-width="140"
								prop="hhxPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.hhxPrice, $index, 'hhxPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.hhxPrice"
											placeholder="请输入车身划痕损失险"
											v-thousand
											:disabled="handleDisabled('hhxPrice')"
											@change="changeTableSyx(row, $index, 'hhxPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.hhxPrice, $index, 'hhxPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.hhxPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="其他险种"
								min-width="140"
								prop="qtPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.qtPrice, $index, 'qtPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.qtPrice"
											placeholder="请输入其他险种"
											v-thousand
											:disabled="handleDisabled('qtPrice')"
											@change="changeTableSyx(row, $index, 'qtPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.qtPrice, $index, 'qtPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.qtPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="增值服务特约条款险"
								min-width="140"
								prop="zzfwPrice">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleColor(row.zzfwPrice, $index, 'zzfwPrice')
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.zzfwPrice"
											placeholder="请输入其他险种"
											v-thousand
											:disabled="handleDisabled('zzfwPrice')"
											@change="changeTableSyx(row, $index, 'zzfwPrice')"
											size="mini" />
										<span
											v-else
											:class="
												handleColor(row.zzfwPrice, $index, 'zzfwPrice')
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.zzfwPrice) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
						</el-table-column>

						<!--其他险种-->

						<el-table-column label="其他险种" align="center">
							<el-table-column
								align="center"
								label="其他保险备注"
								min-width="160"
								prop="otherInsuranceRemark">
								<template #default="{ row, $index }">
									<el-form-item class="formTable">
										<el-input
											v-if="isEdit"
											v-model="row.otherInsuranceRemark"
											placeholder="请输入其他险种备注"
											:disabled="detailForm.otherOpenStatus == 0"
											size="mini" />
										<span v-else>{{ row.otherInsuranceRemark }}</span>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								label="其他保险保费合计"
								min-width="160"
								prop="otherInsuranceSumAmount">
								<template #default="{ row, $index }">
									<el-form-item
										class="formTable"
										:class="
											handleClass(
												row.otherInsuranceSumAmount,
												$index,
												detailForm.otherInsuranceSumAmount,
											)
												? 'redColor'
												: ''
										">
										<el-input
											v-if="isEdit"
											v-model="row.otherInsuranceSumAmount"
											placeholder="请输入其他险种保费"
											:disabled="detailForm.otherOpenStatus == 0"
											v-thousand
											@change="
												changeTable(row, $index, 'otherInsuranceSumAmount')
											"
											size="mini" />
										<span
											v-else
											:class="
												handleClass(
													row.otherInsuranceSumAmount,
													$index,
													detailForm.otherInsuranceSumAmount,
												)
													? 'redSpan'
													: ''
											">
											{{ format_thousand(row.otherInsuranceSumAmount) }}
										</span>
									</el-form-item>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-card>
	</el-form>
</template>

<script>
	export default {
		name: 'vehicleEntry', //车辆录入
		dicts: ['insurance_project'],
		props: {
			value: {
				type: Object,
				default: {},
			},
			state: {
				type: String,
				default: '',
			},
		},
		computed: {
			detailForm: {
				get() {
					let that = this;
					const proxy = new Proxy(that.value, {
						get(target, key) {
							return Reflect.get(target, key);
						},
						set(target, key, value) {
							that.$emit('input', { ...target, [key]: value });
							return true;
						},
					});
					return proxy;
				},
			},
			isEdit() {
				let bool;
				switch (this.state) {
					case 'write':
						bool = true;
						break;
					case 'disabled':
						bool = false;
						break;
					case 'readonly':
						bool = false;
						break;
				}
				return bool;
			},
			requiredCarTax() {
				if (this.value.carTaxStatus) {
					if (Number(this.value.carTaxStatus) === 1 && this.isEdit) {
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			},
			handleTotal() {
				return function (val) {
					let totalCents = 0;

					// Convert each value to cents and add them
					totalCents += Math.round(Number(val.carTax) * 100);
					totalCents += Math.round(Number(val.jqxAmount) * 100);
					totalCents += Math.round(Number(val.szxPrice) * 100);
					totalCents += Math.round(Number(val.ckPrice) * 100);
					totalCents += Math.round(Number(val.jsyPrice) * 100);
					totalCents += Math.round(Number(val.csxPrice) * 100);
					totalCents += Math.round(Number(val.clPrice) * 100);
					totalCents += Math.round(Number(val.hhxPrice) * 100);
					totalCents += Math.round(Number(val.qtPrice) * 100);
					totalCents += Math.round(Number(val.zzfwPrice) * 100);
					totalCents += Math.round(Number(val.otherInsuranceSumAmount) * 100);

					// Convert the total back to dollars and format
					return this.format_thousand((totalCents / 100).toFixed(2));
				};
			},

			handleColor() {
				return function (val, i, str) {
					let boole = false;
					let key_ = this.dict.type.insurance_project
						.map(a => {
							if (str === a.raw.remark) {
								return a.value;
							}
						})
						.filter(a => a)[0];
					let index = this.value.businessList.findIndex(a => a.insuranceProCode == key_);
					if (index !== -1) {
						if (val !== this.value.businessList[index].insurancePrice) {
							boole = true;
						}
					}
					return boole;
				};
			},
			handleClass() {
				return function (val, i, str) {
					let boole = false;
					if (Number(val) !== Number(str)) {
						boole = true;
					}
					return boole;
				};
			},
			handleDisabled() {
				return function (str) {
					let boole = true;
					let key_ = this.dict.type.insurance_project
						.map(a => {
							if (str === a.raw.remark) {
								return a.value;
							}
						})
						.filter(a => a)[0];
					let index = this.value.businessList.findIndex(a => a.insuranceProCode == key_);
					if (index !== -1) {
						boole = false;
					}
					return boole;
				};
			},
		},
		watch: {},
		data() {
			return {};
		},
		created() {},
		methods: {
			handleSyxAmount(val) {
				let totalCents = 0;

				// Convert each value to cents and sum them
				totalCents += Math.round(Number(val.szxPrice) * 100);
				totalCents += Math.round(Number(val.ckPrice) * 100);
				totalCents += Math.round(Number(val.jsyPrice) * 100);
				totalCents += Math.round(Number(val.csxPrice) * 100);
				totalCents += Math.round(Number(val.clPrice) * 100);
				totalCents += Math.round(Number(val.hhxPrice) * 100);
				totalCents += Math.round(Number(val.qtPrice) * 100);
				totalCents += Math.round(Number(val.zzfwPrice) * 100);

				// Convert the total back to dollars and set the value
				const syxAmountDollars = (totalCents / 100).toFixed(2);
				this.$set(val, 'syxAmount', syxAmountDollars);

				// Format the amount for display
				return this.format_thousand(syxAmountDollars);
			},

			changeTable(row, key, field) {
				let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
				if (row[field]) {
					if (msg.test(Number(row[field]))) {
						if (Number(row[field]) >= 0) {
							let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
							row[field] = _value;
						} else {
							row[field] = '';
						}
					} else {
						row[field] = '';
					}
				}
			},

			changeTableSyx(row, key, field) {
				let _value = 0;
				let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
				if (row[field]) {
					if (msg.test(Number(row[field]))) {
						if (Number(row[field]) >= 0) {
							_value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
							row[field] = _value;
						} else {
							row[field] = '';
						}
					} else {
						row[field] = '';
					}
				}
			},

			handleEffect() {
				return new Promise((resolve, reject) => {
					this.$refs.detailForm.validate(valid => {
						if (valid) {
							resolve();
						} else {
							reject();
						}
					});
				});
			},

			valid() {
				return new Promise(resolve => {
					this.$refs.detailForm.validate(valid => {
						resolve(valid);
					});
				});
			},

			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 1) {
						sums[index] = '合计';
						return;
					}
					if (index === 2) {
						sums[index] = this.handleCount();
						return;
					}
					if (index === 14) {
						sums[index] = '';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] = this.format_thousand(sums[index]);
						sums[index] += ' 元';
					} else {
						sums[index] = '';
					}
				});

				return sums;
			},

			handleCount() {
				let totalCents = 0;

				for (let i = 0; i < this.value.insuranceVoList.length; i++) {
					let val = this.value.insuranceVoList[i];
					totalCents += Math.round(Number(val.carTax) * 100);
					totalCents += Math.round(Number(val.jqxAmount) * 100);
					totalCents += Math.round(Number(val.szxPrice) * 100);
					totalCents += Math.round(Number(val.ckPrice) * 100);
					totalCents += Math.round(Number(val.jsyPrice) * 100);
					totalCents += Math.round(Number(val.csxPrice) * 100);
					totalCents += Math.round(Number(val.clPrice) * 100);
					totalCents += Math.round(Number(val.hhxPrice) * 100);
					totalCents += Math.round(Number(val.qtPrice) * 100);
					totalCents += Math.round(Number(val.zzfwPrice) * 100);
					totalCents += Math.round(Number(val.otherInsuranceSumAmount) * 100);
				}

				// Convert totalCents back to dollars and format
				const totalDollars = totalCents / 100;
				return `${this.format_thousand(totalDollars.toFixed(2))} 元`;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/styles/cwgd/formScss.scss';

	// ::v-deep .el-table__body tr.current-row > td.el-table__cell {
	// 	--borderColor: #c0c4cc;
	// 	background-color: var(--borderColor);
	// 	border-color: var(--borderColor);
	// 	color: #fff;
	// }
	::v-deep .header-class {
		.cell::before {
			content: '*';
			color: red;
			padding-right: 2px;
			font-size: 14px;
		}
	}

	::v-deep .redColor .el-form-item__content .el-input__inner {
		color: red !important;
	}

	.redSpan {
		color: red !important;
	}
</style>
